<template>
    <div>
        <v-card>
        <v-card-title>
            <v-btn color="primary" @click="addBrand">新增品牌</v-btn>
            <v-spacer/>
            <!--搜索框，与search属性关联-->
            <v-text-field label="输入关键字搜索" v-model="search" hide-details append-icon="search"/>
        </v-card-title>
        <v-divider/>
        <v-data-table
                :headers="headers"
                :items="brands"
                :pagination.sync="pagination"
                :total-items="totalBrands"
                :loading="loading"
                class="elevation-1"
        >
<!--           props 是items的一个别名  item是不能改变的  -->
            <template slot="items" slot-scope="props">
                <td>{{ props.item.id }}</td>
                <td class="text-xs-center">{{ props.item.name }}</td>
                <td class="text-xs-center">
                    <img v-if="props.item.image" :src="props.item.image" width="130" height="40">
                    <span v-else>无</span></td>
                <td class="text-xs-center">{{ props.item.letter }}</td>
                <td class="is-justify-center layout">
                    <v-btn color="info">编辑</v-btn>
                    <v-btn color="warning">删除</v-btn>
                </td>
            </template>
        </v-data-table>
        </v-card>
    </div>
</template>

<script>
    export default {
        name: "my-brand",
        data () {
            return {
                totalBrands: 0, //总数量
                brands: [], //数据集合
                loading: true,//是否加载中 样式
                pagination: {},//分页信息
                search: '', //搜索过滤字段
                headers: [//头信息
                    {
                        text: 'id',
                        align: 'center', //需要排序
                        value: 'id'
                    },
                    { text: '名称', align: 'center', sortable: false ,value: 'name' },
                    { text: 'LOGO',align: 'center', sortable: false , value: 'image' },
                    { text: '首字母',align: 'center', sortable: false , value: 'letter' },
                    {text: '操作', align: 'center', value: 'id', sortable: false}
                ]
            }
        },
        mounted () {//渲染后执行
            //查询数据
            this.getDataFromServer()
        },
        watch: {
            //监视pagination属性的变化
            pagination:{
                //descending: false 是否降序
                // page: 1      当前页
                // rowsPerPage: 5 每页行数
                // sortBy: "id"  排序的字段
                // totalItems: 0  总条数
                deep:true,
                handler(){
                    //变化后的会点函数 这里再次调用getDataFromServer
                    this.getDataFromServer();
                }
            },
            search:{
                //监视搜索字段
                handler(){
                    this.getDataFromServer();
                }
            }
        },
        methods: {
            getDataFromServer() {
                // //从服务的加载数据的方法
                // console.log(this.pagination);
                // //开启加载
                // this.loading = true
                // //模拟延迟一段时间 随后进行赋值
                // setTimeout(()=>{
                //     this.brands = [
                //         {"id": 2032,"name": "OPPO", "image": "1.jpg","letter": "O"},
                //         {"id": 2033, "name": "飞利浦","image": "2.jpg", "letter": "F"},
                //         {"id": 2034,"name": "华为","image": "3.jpg","letter": "H"},
                //         {"id": 2036,"name": "酷派","image": "4.jpg","letter": "K"},
                //         {"id": 2037,"name": "魅族","image": "5.jpg","letter": "M"}
                //         ];
                //     this.totalBrands = this.brands.length;
                //     //完成赋值后  把加载状态赋值为 false
                //     this.loading = false;
                // },400)
                this.$http.get("/item/brand/page",{
                    params:{
                        key: this.search,
                        page:this.pagination.page,
                        rows:this.pagination.rowsPerPage,
                        sortBy:this.pagination.sortBy,
                        desc:this.pagination.descending
                    }
                }).then(response =>{
                    this.brands = response.data.items;
                    this.totalBrands = response.data.total;
                    this.loading = false;
                } )

            }
        }
    }
</script>